<!--
  @author:  long
  @date:    2023/3/2
  @file:    客户列表
  @require:
-->
<template>
  <div class="performanceAppeal app-container">
    <!-- 客户列表主体 start -->
    <div class="px-2">
      <el-row>
        <el-col :span="12">
          <el-button type="primary" icon="Plus" @click="addAppeal"
            >发起申诉
          </el-button>
          <el-button type="primary" icon="Edit" plain @click="editAppeal"
            >编辑</el-button
          >
          <el-button type="primary" icon="Delete" plain @click="delAppeal"
            >删除</el-button
          >
        </el-col>
        <el-col :span="12">
          <el-form>
            <el-row :gutter="10">
              <el-col :span="10">
                <el-form-item>
                  <el-input
                    placeholder="输入关键字"
                    clearable
                    v-model="queryForm.appealTitle"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item>
                  <el-select
                    v-model="queryForm.userId"
                    placeholder="申诉人"
                    @focus="userInputFocus"
                    class="w-full"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in selectOptionObj['userId']"
                      :key="index"
                      :label="item.label"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="handleQuery">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>

      <el-table
        ref="tableRef"
        :data="tableData"
        v-loading="loading"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="handleSelectable"
        />
        <el-table-column label="申诉编号" prop="id">
          <template #default="scope">
            <el-button link type="primary" @click="toDetail(scope.row)">{{
              scope.row.id
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="申诉人" prop="nickName"> </el-table-column>
        <el-table-column label="申诉事件" prop="appealTitle"></el-table-column>
        <el-table-column label="部门" prop="deptName"></el-table-column>
        <el-table-column label="状态" prop="appealStatus"></el-table-column>

        <el-table-column
          label="申诉时间"
          width="160"
          prop="appealTime"
        ></el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryForm.pageNum"
        v-model:limit="queryForm.pageSize"
        @pagination="getList"
      />
      <!--   客户列表显示end   -->
    </div>
    <!-- 客户列表主体end -->
    <!--  公共弹窗start -->
    <el-dialog
      v-model="dialogObj.visible"
      destroy-on-close
      :close-on-click-modal="false"
      :width="dialogObj.width"
      :title="dialogObj.title"
    >
      <!--   底部按钮   -->
      <template #footer>
        <el-button @click="handleCloseDialog">取消</el-button>
        <el-button type="primary" @click="dialogSave">保存</el-button>
      </template>
    </el-dialog>
    <!--  公共弹窗end -->
    <!--  弹窗选择组件  -->
    <SelectDialog :dialog-param="dialogParam" @ok="selectData"></SelectDialog>
  </div>
</template>

<script setup name="PerformanceAppeal">
import { getCurrentInstance, toRaw } from 'vue'
import { useRouter } from 'vue-router'
import SelectDialog from '@/components/SelectDialog/index.vue'
import useUserStore from '@/store/modules/user'
import {
  delBizassessappealDelete,
  getBizassessappealList
} from '@/api/officeManage/appeal'

const userStore = useUserStore()
const router = useRouter()

const { proxy } = getCurrentInstance()
const loading = ref(false)
const data = reactive({
  queryForm: {
    pageNum: 1,
    pageSize: 10
  },
  total: 0,
  tableData: [],
  dialogObj: {
    visible: false,
    title: '',
    width: '50%',
    model: '',
    type: {
      task: { title: '新建任务', width: '40%' },
      pool: { title: '转入公海', width: '40%' }
    }
  },
  selectionData: [],
  dialogParam: {}, //弹窗组件配置
  selectOptionObj: {} // select
})
const {
  updateTime,
  queryForm,
  tableData,
  dialogObj,
  selectionData,
  dialogParam,
  selectOptionObj,
  total
} = toRefs(data)

/**
 * 跳转详情
 */
const toDetail = row => {
  if (row.appealStatus == '流程未发起') {
    router.push({
      path: '/rsgl/performanceManage/appealDetail',
      query: { appealId: row.id }
    })
  } else {
    let processed = row.taskId != null ? true : false
    router.push({
      path: '/process/workDetail',
      query: {
        procInsId: row.proInsId,
        taskId: row.taskId,
        processed: processed
      }
    })
  }
}

/**
 * 根据id修改多选框禁用状态
 * @param row
 * @param index
 * @returns {boolean}
 */
const handleSelectable = (row, index) => {
  if (row.userId == userStore.user.userId) {
    return true
  } else {
    return false
  }
}

/**
 * 发起申诉
 */
const addAppeal = () => {
  router.push({
    path: '/rsgl/performanceManage/addAppeal'
  })
}

/**
 * 删除申诉
 */
const delAppeal = () => {
  if (!selectionData.value.length) {
    proxy.$modal.msgWarning('请选择要删除的数据')
    return
  }

  let index = selectionData.value.findIndex(
    item => item.appealStatus != '流程未发起'
  )
  if (index != -1) {
    proxy.$modal.msgWarning('有不可删除数据，无法执行删除')
    return
  }
  proxy.$modal
    .confirm('是否确认删除选中的数据-？')
    .then(res => {
      let ids = selectionData.value
        .map(item => {
          return item.id
        })
        .join(',')
      console.info('ids', ids)
      const params = {
        ids
      }
      delBizassessappealDelete(params).then(res => {
        proxy.$modal.msgSuccess(res.msg)
        getList()
      })
    })
    .catch(() => {})
}

/**
 * 编辑申诉
 */
const editAppeal = () => {
  if (selectionData.value.length == 0) {
    proxy.$modal.msgWarning('请选择一条数据')
    return
  }
  if (selectionData.value.length > 1) {
    proxy.$modal.msgWarning('只能选择一条数据')
    return
  }
  if (
    selectionData.value[0].appealStatus != '流程未发起' &&
    selectionData.value[0].appealStatus != '申诉人编辑'
  ) {
    proxy.$modal.msgWarning('该申诉处理中，不可编辑')
    return
  }
  router.push({
    path: '/rsgl/performanceManage/editAppeal',
    query: { appealId: selectionData.value[0].id }
  })
}

/**
 * 弹窗选取获取选中的值
 * @param val
 *  type 业务类型
 *     selectData 选中的数据[{value: 1, label: '王晓易', $treeNodeId: 2}]
 *     labelData 选中的数据label ['王晓易']
 *     defaultCheckedKeys 选中的数据id [1]
 *     dialogVisible: false 弹出框的关闭
 */
function selectData(val) {
  console.info('val', val)
  //归属人员
  if (val.type == 'userId') {
    if (!val.selectData.length) {
      queryForm.value[val.type] = ''
    } else {
      selectOptionObj.value[val.type] = val.selectData
      queryForm.value[val.type] = val.defaultCheckedKeys[0]
    }
  }
}

/**
 * 弹窗保存
 */
function dialogSave() {}

/**
 * 归属人员input获取焦点事件
 */
function userInputFocus() {
  dialogParam.value.type = 'userId'
  dialogParam.value.title = '选择申诉人'
  dialogParam.value.dataType = 'person'
  dialogParam.value.multiple = false
  dialogParam.value.checkStrictly = false
  dialogParam.value.nodeKey = 'id'
  dialogParam.value.apiParams = { deptId: 484 }

  selectOptionObj.value['userId'] = []

  // 有默认值
  if (queryForm.value['userId'] && queryForm.value['userId'].length) {
    dialogParam.value.isDialog = true
    dialogParam.value.defaultCheckedKeys = [queryForm.value['userId']]
  } else {
    dialogParam.value.isDialog = true
    dialogParam.value.defaultCheckedKeys = []
  }
}

/**
 * 获取客户列表
 */
function getList() {
  let params = {
    appealTitle: queryForm.value.appealTitle,
    appealerId:
      queryForm.value.userId && queryForm.value.userId != ''
        ? queryForm.value.userId
        : userStore.user.userId,
    pageNum: queryForm.value.pageNum,
    pageSize: queryForm.value.pageSize
  }
  getBizassessappealList(params).then(res => {
    total.value = res.data.total
    tableData.value = res.data.records
  })
}

/**
 * 弹窗关闭
 */
function handleCloseDialog() {
  dialogObj.value.visible = false
}

/**
 * 表格多选
 */
function handleSelectionChange(val) {
  selectionData.value = val
  console.info('selectionData', selectionData)
}

/**
 * 查询
 */
function handleQuery() {
  queryForm.value.pageNum = 1
  getList()
}

/**
 * 初始化
 */
function init() {
  getList()
}

init()
</script>

<style scoped lang="scss">
.customerList {
  .el-drawer .avue-form {
    @apply p-0;
  }
}
</style>
